import 'package:flutter/material.dart';
import 'package:flutter_bsbdj/utils/constant.dart';
import 'package:banner/banner.dart';
import 'package:cached_network_image/cached_network_image.dart';
import 'bean/News.dart';
import 'package:dio/dio.dart';

import 'stories_detail.dart';

class ZhiHu extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return ZhiHuWidget();
  }
}

class ZhiHuWidget extends State<ZhiHu> {
  List<HotStories> _banner = [];
  List<Stories> _stories = [];

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getStories();
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Container(
          alignment: Alignment.center,
          margin: EdgeInsets.only(right: 60),
          child: Text("知乎"),
        ),
      ),
      body: Container(
        child: ListView(
          children: <Widget>[
            //banner
            Container(
              child: _banner.length == 0
                  ? Image.asset(Constant.IMAGE_LOADING)
                  : BannerView(
                      data: _banner,
                      buildShowView: (index, data) {
                        return _bannerItem(data);
                      },
                      onBannerClickListener: (index, data) {
                        //点击事件
                        _goToDetail(data.id.toString(), data.title);
                      },
                    ),
            ),
            //故事
            _stories.length == 0
                ? Container(
                    width: 0,
                    height: 0,
                  )
                : Container(
                    child: Column(
                      children: <Widget>[
                        Container(
                          height: 30,
                          alignment: Alignment.centerLeft,
                          padding: EdgeInsets.only(left: 15),
                          child: Row(
                            children: <Widget>[
                              Container(
                                width: 3,
                                height: 20,
                                margin: EdgeInsets.only(right: 15),
                                color: Colors.blueAccent,
                              ),
                              Text("故事")
                            ],
                          ),
                        ),
                        Container(
                          child: GridView.builder(
                            itemCount: _stories.length,
                            gridDelegate:
                                SliverGridDelegateWithFixedCrossAxisCount(
                                    crossAxisCount: 2,
                                    mainAxisSpacing: 5,
                                    crossAxisSpacing: 5,
                                    childAspectRatio: 7 / 8),
                            itemBuilder: (context, index) {
                              return _storiesItem(
                                  _stories[index].id.toString(),
                                  _stories[index].images[0],
                                  _stories[index].title);
                            },
                            shrinkWrap: true,
                            primary: false,
                          ),
                        )
                      ],
                    ),
                  ),

            //底部空白
            Container(height: 15,)
          ],
        ),
      ),
    );
  }

  Widget _storiesItem(String id, String url, String title) {
    return GestureDetector(
      child: Container(
        padding: EdgeInsets.only(left: 15, right: 15),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              alignment: Alignment.center,
              height: 160,
              child: CachedNetworkImage(imageUrl: url),
            ),
            Container(
              child: Text(
                  title.length < 18 ? title : title.substring(0, 18) + "..."),
              padding: EdgeInsets.only(top: 3, bottom: 3),
            )
          ],
        ),
      ),
      onTap: () {
        //点击详情
        _goToDetail(id, title);
      },
    );
  }

  void _goToDetail(String id, String title) {
    Navigator.of(context).push(
        MaterialPageRoute(builder: (context) => StoriesDetail(id, title)));
  }

  Widget _bannerItem(HotStories hot) {
    return Stack(
      alignment: Alignment.bottomLeft,
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          color: Colors.black,
          child: CachedNetworkImage(imageUrl: hot.image),
        ),
        Container(
          color: Colors.white24,
          width: MediaQuery.of(context).size.width,
          padding: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
          child: Text(
            hot.title,
            style: TextStyle(color: Colors.white),
          ),
        )
      ],
    );
  }

  void _getStories() async {
    await Dio()
        .get("https://news-at.zhihu.com/api/4/news/latest")
        .then((value) {
      print(value);
      if (value != null) {
        News news = News.fromJson(value.data);
        setState(() {
          _banner = news.top_stories;
          _stories = news.stories;
        });
      }
    }).catchError((e) {
      print(e.toString());
    });
  }
}
